import React, { Component } from 'react'
import style from "./pay.module.scss"
import {back_icon} from '../../../common/icon/svg'
import { Toast, WhiteSpace, WingBlank, Button } from 'antd-mobile';
import {connect} from "react-redux"
import {request} from "../../../request/request"
class Pay extends Component {
    state={
        uid:JSON.parse(localStorage.getItem("userList")).uid,
        address:JSON.parse(localStorage.getItem("address")),
        flag:false,
        flag1:false
    }
     loadingToast=()=>{
        Toast.loading('Loading...', 1, () => {
            this.qu()
            //添加商品订单
            request({
                url:"/getOrders",
                method:"POST",
                data:{
                    uid:this.state.uid,
                    rece_address:this.state.address.city+this.state.address.detailed,
                    paytype:this.props.location.state.active,
                    paystatus:1,
                    paysum:this.props.location.state.money,
                    list:this.getList()
                }
            }).then(res=>{
                let _res=res.data
                if(_res.code==="01"){
                    this.props.addprepaidList()
                    this.props.history.push("/success")
                }
            })


        });
      }
      loadingToasts=()=>{
        Toast.loading('Loading...',1,()=>{
            request({
                url:"/getOrders",
                method:"POST",
                data:{
                    uid:this.state.uid,
                    rece_address:this.state.address.city+this.state.address.detailed,
                    paytype:this.props.location.state.active,
                    paystatus:0,
                    paysum:this.props.location.state.money,
                    list:this.getList()
                }
            }).then(res=>{
                let _res=res.data
                if(_res.code==="01"){
                    this.props.addunpaidList()
                    this.props.history.push("/meBuy")  //代付款页面
                }
            })
        })
      }
      getList=()=>{
            return this.props.carList.filter(item=>{
                return item.ischeck
            })
      }
      //取消订单
      cancel=()=>{
            this.setState({
                flag:true
            })
            setTimeout(()=>{
                this.setState({
                    flag1:true
                })
            },20)
      }
      //确认取消
      qu=()=>{
            this.setState({
                flag1:false
            })
            setTimeout(()=>{
                this.setState({
                    flag:false
                })
            },200)
      }

    render() {
        console.log(this.props.location.state);
        let {name,img} = this.props.location.state.item
        return (
            <div className={style.pay}>
                <div className={style.head}>
                        <span onClick={()=>this.props.history.push("/close")}>{back_icon}</span>
                        <span className={style.shou}>支付</span>
                </div>
                <div className={style["pay-type"]}>
                    <img src={img.default}></img>
                    <span>{name}</span>
                </div>
                <div className={style.allMoney}>
                    <span className={style.symbol}>￥</span>
                    <span className={style.money}>{this.props.location.state.money}.00</span>
                </div>
                <div className={style.footer}>
                    <span className={style.cancel} onClick={this.cancel}>取消</span>
                    {/* <span className={style.affirm}>确认</span> */}
                    <Button onClick={this.loadingToast} className={style.affirm}>确认</Button>
                </div>
                {
                    this.state.flag?<div className={this.state.flag1?style.mark+" "+style.active:style.mark}>
                        <div className={this.state.flag1?style.min+" "+style.active:style.min}>
                            <div className={style["min-cancel"]}>要放弃支付吗？？？</div>
                            <div className={style["min-bottom"]}>
                                <span className={style["min-qu"]} onClick={this.qu}>取消</span>
                                <Button onClick={this.loadingToasts} className={style["min-qi"]}>放弃</Button>
                            </div>
                        </div>
                    </div>:null
                }
            </div>
        )
    }
}

const mapStateToProps = (state)=>{
    return {prepaidList:state.prepaidList,unpaidList:state.unpaidList,carList:state.carList};
}
const mapDispatchToProps= (dispatch)=>{
    return {
        addprepaidList:()=>{
            dispatch({type:"ADDPREPAIDLIST"})
        },
        addunpaidList:()=>{
            dispatch({type:"ADDUNPAIDLIST"})
        }
    }
}
export default connect(mapStateToProps,mapDispatchToProps)(Pay)
